<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/muiReset.css" />
		<link rel="stylesheet" type="text/css" href="css/mainStyle.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
	</head>

	<body>
		
		<div class="mui-content" id="content_controller">
			<!-- banner -->
			<div class="mui-img">
				<img :src="banner1" />
			</div>
			<!-- tab -->
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon iconfont icon-qiandao"></span>
						<div class="mui-media-body">每日签到</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon iconfont icon-new"></span>
						<div class="mui-media-body">每周上新</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon iconfont icon-gold1"></span>
						<div class="mui-media-body">积分商城</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon iconfont icon-qiaquanbao"></span>
						<div class="mui-media-body">领券中心</div>
					</a>
				</li>
			</ul>
			<!-- imgList -->
			<ul class="mui-table-view mui-grid-view">
				<li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="value in imgList">
					<a href="javascript:;">
						<img class="mui-media-object" :src="value.imgSrc">
					</a>
				</li>
			</ul>
			<!-- 早晚市限时抢 -->
			<div class="time_limit">
				<p class="title_700">早晚市限时抢</p>
				<p class="time_end">距离出生日：<span id="limit">
					<span id="t_day">00天</span>
					<span id="t_hour">00小时</span>
					<span id="t_minute">00分</span>
					<span id="t_second">00秒</span></span>
				</p>
			</div>
			<div class="timer">
				<div class="morning">
					<p class="typeZao">早市</p>
					<p class="ZaoStartEnd">8:30-11:00</p>
				</div>
				<div class="night">
					<p class="typeWan">晚市</p>
					<p class="WanStartEnd">19:00-21:00</p>
				</div>
			</div>
			<div class="timer_box">
				<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class="['mui-control-item',{'mui-active':index == 0}]" v-for="(value,index) in morning_data">
							<img :src="value.imgSrc" />
							<p class="timer_proName">{{ value.timer_proName }}</p>
							<p class="timer_proPrice">¥{{ value.timer_proPrice }}</p>
						</a>
					</div>
				</div>
			</div>
			<!-- banner2 -->
			<div class="img_2">
				<img :src="banner2" />
			</div>
			<!-- 24小时精选排行榜 -->
			<div class="choiceness">
				<div class="choiceness_title">
					24小时精选排行榜
					<a class="more">查看更多&nbsp;&gt;</a>
				</div>
				<div class="mui-slider" id="newTop">
					<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<a class="mui-control-item mui-active" href="#item1">每日热销</a>
						<a class="mui-control-item" href="#item2">新品推荐</a>
						<a class="mui-control-item" href="#item3">今日特价</a>
						<a class="mui-control-item" href="#item4">用户好评</a>
					</div>
					<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
					<div class="mui-slider-group">
						<div id="item1" class="mui-slider-item mui-control-content mui-active">
							<ul class="mui-table-view mui-grid-view">
								<li class="mui-table-view-cell mui-media mui-col-xs-4" v-for="value in choiceness_data.choiceness_item1">
									<a href="#">
										<img class="mui-media-object" :src="value.imgSrc">
										<div class="mui-media-body">{{ value.timer_proName }}
											<p>¥{{ value.timer_proPrice }}</p>
										</div>
									</a>
								</li>
							</ul>
						</div>
						<div id="item2" class="mui-slider-item mui-control-content">
							<ul class="mui-table-view mui-grid-view">
								<li class="mui-table-view-cell mui-media mui-col-xs-4" v-for="value in choiceness_data.choiceness_item2">
									<a href="#">
										<img class="mui-media-object" :src="value.imgSrc">
										<div class="mui-media-body">{{ value.timer_proName }}
											<p>¥{{ value.timer_proPrice }}</p>
										</div>
									</a>
								</li>
							</ul>
						</div>
						<div id="item3" class="mui-slider-item mui-control-content">
							<ul class="mui-table-view mui-grid-view">
								<li class="mui-table-view-cell mui-media mui-col-xs-4" v-for="value in choiceness_data.choiceness_item3">
									<a href="#">
										<img class="mui-media-object" :src="value.imgSrc">
										<div class="mui-media-body">{{ value.timer_proName }}
											<p>¥{{ value.timer_proPrice }}</p>
										</div>
									</a>
								</li>
							</ul>
						</div>
						<div id="item4" class="mui-slider-item mui-control-content">
							<ul class="mui-table-view mui-grid-view">
								<li class="mui-table-view-cell mui-media mui-col-xs-4" v-for="value in choiceness_data.choiceness_item4">
									<a href="#">
										<img class="mui-media-object" :src="value.imgSrc">
										<div class="mui-media-body">{{ value.timer_proName }}
											<p>¥{{ value.timer_proPrice }}</p>
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="choiceness_subject">
				<div class="choiceness_title">
					专题精选
					<a class="more">查看更多&nbsp;&gt;</a>
				</div>
				<div class="choiceness_subject_box1">
					<div class="img_items img">
						<img :src="choiceness_subject_data.choiceness_subject_data1.img_items.img_items_scr" />
						<span class="text_box">
						<span class="text_info">{{ choiceness_subject_data.choiceness_subject_data1.img_items.text_info }}</span>
						<span class="check_info">{{ choiceness_subject_data.choiceness_subject_data1.img_items.check_info }}</span>
						</span>
					</div>
					<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<div class="mui-scroll">
							<a :class="['mui-control-item' ,{'mui-active':index == 0}]" v-for="(value,index) in choiceness_subject_data.choiceness_subject_data1.choiceness_subject_box_data">
								<img :src="value.imgSrc" />
								<p class="timer_proName">{{ value.timer_proName }}</p>
								<p class="timer_proPrice">¥{{ value.timer_proPrice }}</p>
							</a>
						</div>
					</div>
				</div>
				<div class="choiceness_subject_box1">
					<div class="img_items img">
						<img :src="choiceness_subject_data.choiceness_subject_data2.img_items.img_items_scr" />
						<span class="text_box">
						<span class="text_info">{{ choiceness_subject_data.choiceness_subject_data2.img_items.text_info }}</span>
						<span class="check_info">{{ choiceness_subject_data.choiceness_subject_data2.img_items.check_info }}</span>
						</span>
					</div>
					<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<div class="mui-scroll">
							<a :class="['mui-control-item ',{'mui-active':index == 0}]" v-for="(value,index) in choiceness_subject_data.choiceness_subject_data2.choiceness_subject_box_data">
								<img :src="value.imgSrc" />
								<p class="timer_proName">{{ value.timer_proName }}</p>
								<p class="timer_proPrice">¥{{ value.timer_proPrice }}</p>
							</a>
						</div>
					</div>
				</div>
				<div class="choiceness_subject_box1">
					<div class="img_items img">
						<img :src="choiceness_subject_data.choiceness_subject_data3.img_items.img_items_scr" />
						<span class="text_box">
						<span class="text_info">{{ choiceness_subject_data.choiceness_subject_data3.img_items.text_info }}</span>
						<span class="check_info">{{ choiceness_subject_data.choiceness_subject_data3.img_items.check_info }}</span>
						</span>
					</div>
					<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<div class="mui-scroll">
							<a :class="['mui-control-item' ,{'mui-active':index == 0}]" v-for="(value,index) in choiceness_subject_data.choiceness_subject_data3.choiceness_subject_box_data">
								<img :src="value.imgSrc" />
								<p class="timer_proName">{{ value.timer_proName }}</p>
								<p class="timer_proPrice">¥{{ value.timer_proPrice }}</p>
							</a>
						</div>
					</div>
				</div>

			</div>
			<div class="carefully_choose">
				<div class="carefully_title"><span>精心挑选</span></div>
				<div class="carefully_choose_box1" v-for="value in carefully_choose_data">
					<div class="carefully_title_gray">
						{{ value.carefully_title }}
						<a class="more">查看更多&nbsp;&gt;</a>
					</div>
					<div class="carefully_choose_img img">
						<img :src="value.carefully_choose_img" />
						<span>{{ value.carefully_choose_text }}</span>
					</div>
					<ul class="mui-table-view mui-grid-view">
						<li class="mui-table-view-cell mui-media mui-col-xs-4" v-for="ele in value.carefully_chooses">
							<a href="#">
								<img class="mui-media-object" :src="ele.carefully_chooses_img">
								<div class="mui-media-body">
									<p class="name">{{ ele.carefully_chooses_name }}</p>
									<p class="price">¥{{ ele.carefully_chooses_price }}</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 到底啦，没有更多啦！ -->
			<fieldset>
				<legend>&nbsp;&nbsp;到底啦，没有更多啦！&nbsp;&nbsp;</legend>
			</fieldset>
		</div>
	</body>
	<script src="js/zepto_1.1.3.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript">
		mui.init();
		$(function() {
			window.setInterval(getTimer, 10); /*设置不间断定时器执行getTimer函数*/
		})

		function getTimer() {
			var endtime = new Date("2017/10/01 23:50:00"); /*定义结束时间*/
			var nowtime = new Date(); /*获取当前时间*/
			var cha = endtime.getTime() - nowtime.getTime(); /*得到它们相差的时间*/
			var day = Math.floor(cha / 1000 / 60 / 60 / 24); /*划分出时分秒*/
			var hour = Math.floor(cha / 1000 / 60 / 60 % 24);
			var minute = Math.floor(cha / 1000 / 60 % 60);
			var second = Math.floor(cha / 1000 % 60);
			if(minute <= 9) minute = '0' + minute;
			if(second <= 9) second = '0' + second;
			if(hour <= 9) hour = '0' + hour;
			$("#t_day").html(day + "天"); /*写到页面中*/
			$("#t_hour").html(hour + "小时");
			$("#t_minute").html(minute + "分");
			$("#t_second").html(second + "秒");
		}

		var vm = new Vue({
			el: '#content_controller',
			data: {
				banner1: '',
				banner2: '',
				imgList: [],
				morning_data: [],
				night_data: [],
				choiceness_data: {
					choiceness_item1:[],
					choiceness_item2:[],
					choiceness_item3:[],
					choiceness_item4:[]
				},
				choiceness_subject_data: {
					choiceness_subject_data1:{},
					choiceness_subject_data2:{},
					choiceness_subject_data3:{}
				},
				carefully_choose_data: []
			},
			mounted: function() {
				this.getData();
				this.refresh()
			},
			methods: {
				getData: function() {
					mui.ajax("json/main.json", {
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						success: function(data) {
							//服务器返回响应，根据响应结果，分析是否登录成功；
							console.log(data);
							vm.banner1 = data.mainData_1.bannerImg;
							vm.banner2 = data.mainData_1.banner2_src;
							vm.imgList = data.mainData_1.imgList;
							vm.morning_data = data.mainData_1.morning_data;
							vm.choiceness_data.choiceness_item1 = data.mainData_1.choiceness_data.choiceness_item1;
							vm.choiceness_data.choiceness_item2 = data.mainData_1.choiceness_data.choiceness_item2;
							vm.choiceness_data.choiceness_item3 = data.mainData_1.choiceness_data.choiceness_item3;
							vm.choiceness_data.choiceness_item4 = data.mainData_1.choiceness_data.choiceness_item4;
							vm.choiceness_subject_data.choiceness_subject_data1 = data.mainData_1.choiceness_subject_data.choiceness_subject_data1;
							vm.choiceness_subject_data.choiceness_subject_data2 = data.mainData_1.choiceness_subject_data.choiceness_subject_data2;
							vm.choiceness_subject_data.choiceness_subject_data3 = data.mainData_1.choiceness_subject_data.choiceness_subject_data3;
							vm.carefully_choose_data = data.mainData_1.carefully_choose_data
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							console.log(type);
						}
					})
				},
				refresh: function() {
					mui('.mui-scroll-wrapper').scroll({
						deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
					});
				}
			}
		})
	</script>

</html>